<!--
 * @LastEditors: 杜康
 * @LastEditTime: 2021-12-27 09:07:34
-->
<template>
  <h1 class="font-extrabold text-3xl mb-6">Home</h1>
  <p class="mb-6">Name in store is: {{name}}</p>
  <input
    v-model="newName"
    type="text"
    class="border mr-4 p-2 border-gray-600 rounded"
  />
  <a-button
    @click="saveName"
    type="primary"
  >
    Primary
  </a-button>
  <button
    @click="saveName"
    class="text-white bg-indigo-600 p-2 rounded"
  >Submit</button>
</template>

<script setup>
import { computed, ref } from 'vue'
import { useStore } from 'vuex'
const store = useStore()
import { useRouter } from 'vue-router'
const router = useRouter()
const name = computed(() => {
  return store.state.user.name
})
const newName = ref('')
newName.value = store.state.user.name
function saveName() {
  store.dispatch('saveName', newName.value)
  newName.value = ''
  router.push('/mainMenu/about')
}
</script>

<style>
</style>